import React, {Component} from 'react'
import {Text, View, Button, TouchableOpacity, StyleSheet, Modal, TextInput, Vibration} from 'react-native';
import { connect } from 'react-redux'

class Tools extends Component {
  constructor(props) {
    super(props);
    this.state = {
      calculateShow: false,
      tomatoShow: false,
      calculateTarget: '0',
      calculateYear: '0',
      calculateRate: '10',
      money: 0,
      tomato: 2700
    }
  }

  calculateMoney() {
    this.setState({
      calculateShow: true
    })
  }

  calculate() {
    let persent = Number(this.state.calculateRate)/100
    let rate = 1 + persent
    let allRate =(Math.pow(rate, Number(this.state.calculateYear))-1)*rate
    let money = Number(this.state.calculateTarget)*(persent)/(allRate*12)
    this.setState({
      money: money.toFixed(2)
    })
  }

  setTomato() {
    this.setState({
      tomatoShow: true
    })
    this.time = setInterval(()=> {
      this.setState({
        tomato: this.state.tomato-1
      })
    }, 1000)
  }

  componentDidMount() {
    if(this.state.tomato <= 0) {
      clearInterval(this.time);
      Vibration.vibrate();
    }
  }

  showTime() {
    if(this.state.tomato > 60) {
      let m = parseInt(this.state.tomato/60)
      let s = this.state.tomato - m*60
      return <Text style={{color: '#fff',fontSize: 16}}>{m>10 ? m : ('0'+m)}:{s > 10 ? s : ('0'+s)}</Text>
    } else {
      return <Text style={{color: '#fff',fontSize: 16}}>00:{this.state.tomato}</Text>
    }
  }

  render () {
    return (
      <View style={styles.conatiner}>
        <TouchableOpacity style={styles.button}>
          <Button
            title="定投收益计算"
            onPress={()=> this.calculateMoney()}
            color={this.props.themeColor}
            accessibilityLabel="Learn more about this purple button"
          />
        </TouchableOpacity>

        <TouchableOpacity style={styles.button}>
          <Button 
            title="开始番茄钟"
            color={this.props.themeColor}
            onPress={()=> this.setTomato()}
            accessibilityLabel="Learn more about this purple button"
          />
        </TouchableOpacity>
         <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.calculateShow}
          onRequestClose={() => {
           this.setState({
            calculateShow: false
           })
          }}
        >
          <View style={{ marginTop: 22 }}>
            <View style={styles.item}>
              <Text>目标需要多少钱？</Text>
              <View style={{flexDirection: 'row'}}>
                <TextInput
                  style={{height: 40,width: 200, borderColor: 'gray', borderWidth: 1, borderRadius: 4}}
                  onChangeText={(text) => this.setState({calculateTarget: text})}
                  keyboardType="number-pad" 
                  value={this.state.calculateTarget}
                />
                <Text> 元</Text>
              </View>
            </View>
            <View style={styles.item}>
              <Text>打算定投几年？</Text>
              <View style={{flexDirection: 'row'}}>
                <TextInput
                  style={{height: 40,width: 200, borderColor: 'gray', borderWidth: 1, borderRadius: 4}}
                  onChangeText={(text) => this.setState({calculateYear: text})}
                  keyboardType="number-pad" 
                  value={this.state.calculateYear}
                />
                <Text> 年</Text>
              </View>
            </View>
            <View style={styles.item}>
              <Text>平均年华收益？</Text>
              <View style={{flexDirection: 'row'}}>
                <TextInput
                  style={{height: 40,width: 200, borderColor: 'gray', borderWidth: 1, borderRadius: 4}}
                  onChangeText={(text) => this.setState({calculateRate: text})} 
                  keyboardType="number-pad"
                  value={this.state.calculateRate}
                />
                <Text>  %</Text>
              </View>
            </View>
            <Button
              onPress={()=> this.calculate()} 
              title="计算"
              color={this.props.themeColor}
              accessibilityLabel="Learn more about this purple button"
            />
            {
              this.state.money?
              (<Text style={styles.result}>每个月需要定投{this.state.money}</Text>):null
            }
          </View>
        </Modal>

        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.tomatoShow}
          onRequestClose={() => {
            
          }}
        >
          <View style={styles.tomatoContainer}>
            <View style={styles.tomato}>
              <View style={[styles.tomatoitem, {backgroundColor: this.props.themeColor}]}>
                {
                  this.showTime()
                }
              </View>
            </View>
            <Text style={{marginTop: 20}}>已经坚持{45 - parseInt(this.state.tomato/60)}分钟，再坚持{parseInt(this.state.tomato/60)}分钟</Text>
          </View>
        </Modal>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  conatiner: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 20,
  },
  button: {
    marginBottom: 40,
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 20,
    paddingRight: 20,
    marginBottom: 20
  },
  result: {
    marginTop: 20,
    textAlign: 'center',
    height: 40,
    backgroundColor: '#cccc',
    lineHeight: 40
  },
  tomato: {
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: "#f5f5f5",
    alignItems: 'center',
    justifyContent: 'center'
  },
  tomatoContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  tomatoitem: {
    width: 160,
    height: 160,
    borderRadius: 90,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default connect((state)=> ({themeColor: state.theme.themeColor}), null)(Tools)
